<style>

.el-descriptions {
  font-size: 16px;
  font-family: 微软雅黑;
  width: 700px;

}

.el-descriptions__title {
  font-weight: bold;
  font-size: 22px;
}

.el-descriptions-item__label.is-bordered-label {
  width: 120px;
  height: 50px;
}


p {
  display: inline;
  text-align: center;
  font-size: 20px;
  font-family: 新宋体;
  font-weight: bold;
}

img {
  width: 200px;
  height: 200px;
}
</style>
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师管理</el-breadcrumb-item>
      <el-breadcrumb-item>查询教师信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-form :inline="true" :model="t" class="demo-form-inline">
      <el-form-item label="教师姓名:">
        <el-input v-model="name" placeholder="请输入教师姓名"></el-input>
      </el-form-item>
      <el-form-item label="职工ID:">
        <el-input v-model="jobId" placeholder="请输入职工id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="select">查询</el-button>
      </el-form-item>
    </el-form>
    <hr>
    <el-empty v-if="display" description="暂无数据..."></el-empty>
    <div v-else>
      <el-descriptions title="教师详情信息" :column="1" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名:
          </template>
          {{t.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-female"></i>
            性别:
          </template>
          {{t.gender}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-watch-1"></i>
            年龄:
          </template>
          {{t.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号:
          </template>
          {{t.number}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-sunset"></i>
            教龄:
          </template>
          {{t.seniority}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-school"></i>
            所属系:
          </template>
          {{t.courseName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-set-up"></i>
            班级:
          </template>
          {{t.grade}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-data-line"></i>
            入职时间:
          </template>
          {{t.created}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-upload2"></i>
            教研级别:
          </template>
          {{t.level}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline-round"></i>
            职工ID:
          </template>
          {{t.jobId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            企业:
          </template>
          <el-tag size="medium">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location"></i>
            居住地:
          </template>
          {{t.address}}
        </el-descriptions-item>
      </el-descriptions>
      <div style="width:250px;height:250px;float: right;position: absolute;top: 230px;left: 1040px">
        <p style="font-family: 微软雅黑;color: #211d1d;margin-bottom: 10px">证件照片:</p>
        <el-card style="width: 240px;height: 240px">
          <img :src="t.url" width="100%" alt="">
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'medium',
      display: true,
      name:'',
      jobId: '',
      t: {
        name: '',
        age: '',
        address: '',
        number: '',
        seniority: '',
        courseName: '',
        grade: '',
        created: '',
        level: '',
        jobId: '',
        gender:'',
        url:''
      }
    };
  },
  methods: {
    select() {
      if (this.name==''){
        this.$message.error("教师姓名不能为空!")
      }else if (this.jobId==''){
        this.$message.error("职工ID不能为空!")
      }else {
        let url = "http://localhost:9800/teacher/"+this.name+"/"+this.jobId+"/selectDetail"
        this.axios.post(url).then((response)=> {
          let responseBody = response.data;
          console.log(responseBody)
          if (responseBody.state==20000){
            this.display = false;
            this.t = responseBody.data;
            this.t.url = require('../../../public'+this.t.url);
          }else {
            this.$message.error(responseBody.message);
          }
        })
      }
    }
  },
  mounted() {

  }
}
</script>